<script>
export default {
  name: "Order",
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '一年会员',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 66.00,
          status: '订单取消'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '一个月会员',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 9.90,
          status: '订单超时'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '一个季度会员',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 26.00,
          status: '支付成功 '
        }
      ]
    }
  },
}
</script>

<template>
<div>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        prop="province"
        label="订单标题"
        width="299">
    </el-table-column>
    <el-table-column
        prop="zip"
        label="订单金额"
        width="100">
    </el-table-column>
    <el-table-column
        prop="date"
        label="订单日期"
        width="150">
    </el-table-column>
    <el-table-column
        prop="status"
        label="订单状态"
        width="100">
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">取消订单</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
    <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
    </el-pagination>
  </div>
</div>
</template>

<style scoped lang="less">

</style>
